<template>
  <div>
    <NuxtLayout>
      <!-- <NuxtWelcome /> -->
      <!-- <div class="title">{{ num }}</div>
    <button @click="num++">num++</button> -->

      <!--  相当于router-view，加载显示路由组件 -->
      <NuxtPage></NuxtPage>
    </NuxtLayout>

    <br />
    <!-- 使用组件 -->
    <myComponent></myComponent>
  </div>
</template>

<script lang="ts" setup>
import MyComponent from "./components/myComponent.vue";

const num = ref(0);
</script>
<!-- 注意：用transition，把scoped去掉 -->
<style>
.title {
  color: pink;
}
/* page transition */
/* .page-enter-active,
.page-leave-active {
  transition: all 2s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(1rem);
} */

/* layout transition */
.layout-enter-active,
.layout-leave-active {
  transition: all 0.4s;
}
.layout-enter-from,
.layout-leave-to {
  filter: grayscale(1);
}
</style>
